import moment from 'moment';
import styles from '../style.less';
import { CheckMergeResult } from '../types.d';

interface CheckResultProps {
  checkResult: CheckMergeResult;
}
const formatAmount = (val: number = 0) => {
  return (val / 100).toFixed(2);
};

const CheckResult = (props: CheckResultProps) => {
  const { checkResult } = props;
  const { prevInfo, mergeInfo } = checkResult;
  return (
    <div className={styles.checkResult}>
      <h3>合并前信息：</h3>
      <ul>
        <li>
          <span>总应付金额：</span>
          <span>{formatAmount(prevInfo.prevPayable)}</span>
        </li>
        <li>
          <span>总实付金额：</span>
          <span>{formatAmount(prevInfo.prevActual)}</span>
        </li>
      </ul>
      <h3>合并后信息：</h3>
      <ul>
        <li>
          <span>订单号码：</span>
          <span>{mergeInfo.orderNo}</span>
        </li>
        <li>
          <span>{mergeInfo.newOrderInfo.isCarOut ? '总应付金额：' : '当前应付金额：'}</span>
          <span>{formatAmount(mergeInfo.newOrderInfo.payableAmount)}</span>
        </li>
        <li>
          <span>车辆驶入时间：</span>
          <span>{moment(mergeInfo.newOrderInfo.inTime).format('YYYY-MM-DD HH:mm:ss')}</span>
        </li>
        <li>
          {mergeInfo.newOrderInfo.isCarOut ? (
            <>
              <span>车辆驶出时间：</span>
              <span>{moment(mergeInfo.newOrderInfo.outTime).format('YYYY-MM-DD HH:mm:ss')}</span>
            </>
          ) : (
            <>车辆尚未驶出</>
          )}
        </li>
      </ul>
    </div>
  );
};

export default CheckResult;
